let customerlistModule = (function () {
    let $tbody = $('.tableBox').find('tbody'),
        $selectBox = $('.selectBox'),
        $searchInp = $('.searchInp'),
        $pageBox = $('.pageBox');

    let page = 1,// 第几页
        limit = 10;// 每页多少数据
    async function bindHTML() {
        // 获取客户列表
        let result = await axios.get('/customer/list', {
            params: {
                lx: 'my',// my 获取我的客户 ；all 获取全部客户（默认）
                type: $selectBox.val(),
                search: $searchInp.val().trim(),
                limit,
                page
            }
        })

        if (result.code == 0) {
            let str = '';
            result.data.forEach(item => {
                let {
                    id,
                    name,
                    sex,
                    email,
                    phone,
                    QQ,
                    weixin,
                    type,
                    address,
                    userId,
                    userName,
                } = item;
                str += ` <tr>
				<td class="w8">${name}</td>
				<td class="w5">${sex ? '女' : '男'}</td>
				<td class="w10">${email}/td>
				<td class="w10">${phone}</td>
				<td class="w10">${weixin}</td>
				<td class="w10">${QQ}</td>
				<td class="w5">${type}</td>
				<td class="w8">${userName}</td>
				<td class="w20">${address}</td>
				<td class="w14" customerId=${id}>
					<a href="javascript:;">编辑</a>
					<a href="javascript:;">删除</a>
					<a href="visit.html?id=${id}">回访记录</a>
				</td>
			</tr>`
            })
            $tbody.html(str);

            // 分页管理
            let {
                page,
                limit,
                total,
                totalPage
            } = result;
            page = parseInt(page)
            total = parseInt(result.total);
            totalPage = parseInt(result.totalPage);
            if (totalPage > 1) {
                str = '';
                if (page > 1) {
                    str += ` <a href="javascript:;">上一页</a>`
                }
                str += `<ul class="pageNum">`
                for (let i = 1; i <= totalPage; i++) {
                    str += `<li class="${i === page ? 'active': ''}">${i}</li>`
                }
                str += `</ul>`
                if (page < totalPage) {
                    str += `<a href="javascript:;">下一页</a>`
                }
                $pageBox.html(str)
            }

        } else {
            // 没有匹配的信息
            $tbody.html('')
            $pageBox.html('');
        }
    }

    function handle() {
        // 模糊查询
        $selectBox.change(bindHTML);
        $searchInp.on('keydown', e => {
            if (e.keyCode == 13) {
                bindHTML();
            }
        })
        // 基于事件委托 实现分页点击
        $pageBox.click(async function (e) {
            let target = e.target,
                $target = $(target),
                tagName = target.tagName,
                // TEXT = $target.html();
                TEXT = target.innerHTML;
            console.log(tagName, TEXT)
            if (tagName === 'A' && TEXT === '上一页') {
                page--;
            }
            if (tagName === 'A' && TEXT === '下一页') {
                page++;
            }
            if (tagName === 'LI') {
                page = parseInt(TEXT);
            }
            bindHTML();
        })
        // 事件委托 编辑、删除 功能
        $tbody.click(async function (e) {
            let target = e.target,
                $target = $(target),
                tagName = target.tagName,
                TEXT = $target.html();
            let customerId = $target.parent().attr('customerId')
            if (tagName === 'A') {
                if (TEXT === '编辑') {
                    // 跳到 新增客户 页面
                    window.location.href = `customeradd.html?id=${customerId}`;
                    //....
                } else if (TEXT === '删除') {
                    // 删除前的确认
                    let flag = confirm(`小主，您确定要删除编号为${customerId}客户的信息吗？`);
                    if (!flag) return;
                    let result = await axios.get('/customer/delete', {
                        params: {
                            customerId: customerId
                        }
                    })
                    if (result.code == 0) {
                        alert(`小主，已成功为您删除编号为${customerId}客户的信息~`);
                        return;
                    } else {
                        alert('小主，删除过程中遇到了问题');
                        return;
                    }
                }
            }
        })
    }
    return {
        init() {
            bindHTML();
            handle();
        }
    }
}())
customerlistModule.init();